<template>
	<view>
		<cu-custom :bgcolor="'#fff'" />
		<view class="shop-list" v-if="orderInfo">
			<scroll-view scroll-y="true" :style="'height:'+scorllHeight+ 'px;'">
				<view class="list-box pt-3 pb-3 pl-4 pr-4 mb-2">
					<view class="list pl-3 pr-3 mb-2">
						<view class="title-box">
							<title title="基本信息"></title>
						</view>
						<view class="content span-20">
							<view class="pt-2 pb-2 d-flex flex-column">
								<view class="d-flex flex-row a-center j-sb">
									<text class="mb-1 text-light-muted">订单号:</text>
									<text class="mb-1">{{orderInfo.order_sn}}</text>
								</view>
								<view class="d-flex flex-row a-center j-sb">
									<text class="mb-1 text-light-muted">订单状态:</text>
									<text class="text-success">{{orderInfo.new_order_status}}</text>
								</view>

								<view class="mb-1 d-flex flex-row j-sb">
									<view class="text-light-muted">
										购货人: <text class="text-light-muted">{{orderInfo.consignee}}</text>
									</view>
									<view class="d-flex flex-row j-end">
										<button class="mini-btn m-0 main-bg-color text-white font-md ml-1"
											type="default" size="mini" @click="inputDialogToggle">购货人信息</button>
										<!-- <button class="mini-btn m-0 main-bg-color text-white font-md ml-1"
											type="default" size="mini" @click="leaveMessage">查看留言</button> -->
									</view>

								</view>
								<view class="d-flex flex-row a-center j-sb">
									<text class="mb-1 text-light-muted">下单时间:</text>
									<text class="text-light-muted">{{orderInfo.order_time}}</text>
								</view>
								<view class="d-flex flex-row a-center j-sb">
									<text class="mb-1 text-light-muted">支付时间:</text>
									<text class="text-light-muted">{{orderInfo.pay_time}}</text>
								</view>
								<view class="d-flex flex-row a-center j-sb">
									<text class="mb-1 text-light-muted">支付方式:</text>
									<text class="text-light-muted">{{orderInfo.pay_name}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="list pl-3 pr-3 mb-2">
						<view class="title-box">
							<title title="商品信息"></title>
							<!-- <view class="addIcon">
								<button class="mini-btn m-0 main-bg-color text-white font-md ml-1" type="default"
									size="mini" @click="shopInfoEdit">编辑</button>
							</view> -->
						</view>
						<view class="content span-20">
							<view class="p-2 d-flex flex-column">
								<view class="d-flex flex-row a-center j-start">
									<text class="mb-1 text-light-muted">商品名称: {{goodsInfo.goods_name}}</text>
								</view>
								<view class="d-flex flex-row a-center j-start span-20">
									<text class="mb-1 text-light-muted span-20">货号: {{goodsInfo.goods_sn}}</text>
								</view>
								<view class="d-flex flex-row a-center j-start span-20">
									<text class="mb-1 text-light-muted span-8">售后: {{goodsInfo.shouhou}}</text>
									<text class="mb-1 text-light-muted span-8">库存: <text
											class="main-text-color">{{goodsInfo.storage}}</text></text>
								</view>
								
								<view class="d-flex flex-row a-center j-start span-20">
									<text class="mb-1 text-light-muted span-8">价格: <text
											class="main-text-color">￥{{goodsInfo.goods_price}}</text></text>
									<text class="text-light-muted span-12">数量: <text
											class="main-text-color">{{goodsInfo.goods_number}}</text></text>
								</view>
								<view class="d-flex flex-row a-center j-start span-20">
									<text class="text-light-muted span-8">属性:</text>
									<text class="text-light-muted span-8 d-flex flex-column" v-if="goodArr && goodArr.length> 0">
										<text v-for="(item, index) in goodArr" :key="index">
											<text>{{item.name}} {{item.value}}</text>
										</text>
									</text>
									
								</view>
								<view class="d-flex flex-row a-center j-start span-20">
									<text class="text-light-muted span-8">小计: {{goodsInfo.formated_subtotal}}</text>
									<text class="text-light-muted span-12">合计: {{orderInfo.formated_goods_amount}}</text>
								</view>									
								<view class="d-flex flex-row a-center j-start">
									<text class="mb-1 text-light-muted">手机专享价格: <text
											class="main-text-color">{{goodsInfo.exclusive}}</text></text>
								</view>
							</view>
						</view>
					</view>
					<view class="list pl-3 pr-3">
						<view class="title-box">
							<title title="费用信息"></title>
							<!-- <view class="addIcon">
								<button class="mini-btn m-0 main-bg-color text-white font-md ml-1" type="default"
									size="mini" @click="coatEdit">编辑</button>
							</view> -->
						</view>
						<view class="content span-20">
							<view class="p-2 d-flex flex-column">
								<view class="d-flex flex-column text-light-muted">
									<view class="">
										商家活动支出
									</view>
									<view class="d-flex flex-column pl-2">
										<text>新用户立减优惠: <text class="main-text-color">-{{listInfo.shoudan_youhui}}</text></text>
										<text>满减优惠: <text class="main-text-color">-{{listInfo.supp_manjian}}</text></text>
										<text>配送费: <text class="main-text-color">-{{listInfo.shipping_fee}}</text></text>
										<text>红包价格: <text class="main-text-color">-{{listInfo.red_packet_money}}</text></text>
									</view>
								</view>
								<view class="d-flex flex-column text-light-muted">
									<view class="">
										平台服务费支出
									</view>
									<view class="d-flex flex-column pl-2">
										<text>平台服务费: <text class="main-text-color">-{{listInfo.xz_rebate_money}}</text></text>
										<text>第三方手续费: <text class="main-text-color">-{{listInfo.sanfang_fee}}</text></text>
										<text>平台配送费: <text class="main-text-color">-{{listInfo.xz_shipping_fee}}</text></text>
									</view>
								</view>
								<view class="d-flex flex-column text-light-muted">
									<view class="">
										平台补贴详情
									</view>
									<view class="d-flex flex-column pl-2">
										<text>新用户首单补贴: <text class="main-text-color">+{{listInfo.xz_new_user_shou_subsidy}}</text></text>
										<text>满减补贴: <text class="main-text-color">+{{listInfo.xz_manjian_subsidy}}</text></text>
										<text>超级红包: <text class="main-text-color">+{{listInfo.xz_redpacket_subsidy}}</text></text>
									</view>
								</view>
								<view class="d-flex flex-column text-light-muted">
									<view class="">
										支付金额: <text class="main-text-color"><text class="main-text-color">{{listInfo.order_amount}}</text></text>元
									</view>
								</view>
							</view>
							<!-- <view class="p-2 d-flex flex-column">
								<text class="mb-1">商品总金额: <text class="main-text-color">￥25</text> - 折扣: <text
										class="main-text-color">￥25</text> + 发票税额: <text
										class="main-text-color">￥25</text> + 配送费用: <text
										class="main-text-color">￥25</text> + 保价费用: <text
										class="main-text-color">￥25</text> + 支付费用: <text
										class="main-text-color">￥25</text> +
									包装费用: <text class="main-text-color">￥25</text> + 贺卡费用: <text
										class="main-text-color">￥25</text></text>
								<text class="mb-1"></text>
								<text class="mb-1">= 订单总金额: <text class="main-text-color">￥25</text></text>
								<text class="mb-1"></text>
								<text class="mb-1">- 已付款金额: <text class="main-text-color">￥25</text> - 使用余额: <text
										class="main-text-color">￥25</text> - 使用积分: <text
										class="main-text-color">￥25</text> - 使用红包: <text
										class="main-text-color">￥25</text></text>
								<text class="mb-1"></text>
								<text class="mb-1">= 应付款金额: <text class="main-text-color">￥25</text></text>
							</view> -->
						</view>
					</view>
				</view>

				</scroll-view>
				
				
				<!-- 购货人信息 弹出 -->
					<uni-popup ref="inputDialog" type="dialog">
						<uni-popup-dialog ref="inputClose" mode="input" title="基本信息" value="对话框预置提示内容!" placeholder="请输入内容"
							@confirm="dialogInputConfirm">
							<view class="content span-20">
								<view class="p-2 d-flex flex-column">
									<text class="mb-1">店铺名称: {{orderInfo.referer}}</text>
									<text class="mb-1">收货人:  {{orderInfo.consignee}}</text>
									<view class="mb-1">联系方式: {{orderInfo.mobile}}
									</view>
									<text class="mb-1">地址: {{orderInfo.address}}</text>
								</view>
							</view>
						</uni-popup-dialog>
					</uni-popup>
				
					<!-- 查看留言 弹出 -->
					<uni-popup ref="leave" type="dialog">
						<uni-popup-dialog ref="inputClose" mode="input" title="留言" value="对话框预置提示内容!" placeholder="请输入内容"
							@confirm="dialogInputConfirm">
							<view class="content span-20">
								<view class="p-2 d-flex flex-column">
									<view class="title">留言标题</view>
									<input style="background: #f2f2f2;" class="uni-input" disabled />
								</view>
								<view class="p-2 d-flex flex-column">
									<view class="title">留言内容</view>
									<textarea style="background: #f2f2f2;width: 100%;" v-model="loadtext" disabled />
								</view>
							</view>
						</uni-popup-dialog>
					</uni-popup>
					<!-- 费用编辑 弹出 -->
					<uni-popup ref="coat" type="dialog">
						<uni-popup-dialog ref="inputClose" mode="input" title="费用编辑" value="对话框预置提示内容!" placeholder="请输入内容"
							@confirm="coatConfirm">
							<view class="content span-20">
								<view class="d-flex flex-row a-center j-sb span-20">
									<view class="p-2 d-flex flex-column span-10">
										<view class="title">折扣</view>
										<input style="background: #f2f2f2;" class="uni-input" />
									</view>
									<view class="p-2 d-flex flex-column span-10">
										<view class="title">发票税额</view>
										<input style="background: #f2f2f2;" class="uni-input" />
									</view>
								</view>
								<view class="d-flex flex-row a-center j-sb span-20">
									<view class="p-2 d-flex flex-column span-10">
										<view class="title">使用余额</view>
										<input style="background: #f2f2f2;" class="uni-input" />
									</view>
									<view class="p-2 d-flex flex-column span-10">
										<view class="title">支付费用</view>
										<input style="background: #f2f2f2;" class="uni-input" />
									</view>
								</view>
								<view class="d-flex flex-row a-center j-sb span-20">
									<view class="p-2 d-flex flex-column span-20">
										<view class="title">使用积分</view>
										<input style="background: #f2f2f2;" class="uni-input" />
									</view>
				
								</view>
								<view class="d-flex flex-row a-center j-sb span-20">
									<view class="p-2 d-flex flex-column span-20">
										<view class="title">使用红包</view>
										<uni-data-select style="background: #f2f2f2;" v-model="value" :localdata="range"
											@change="change"></uni-data-select>
									</view>
				
								</view>
							</view>
						</uni-popup-dialog>
					</uni-popup>
					<!-- 商品编辑 -->
					<uni-popup ref="shopInfo" type="dialog">
						<uni-popup-dialog ref="inputClose" mode="input" title="商品编辑" value="对话框预置提示内容!" placeholder="请输入内容"
							@confirm="shopInfoConfirm">
							<view class="content span-20">
								<view class="text-danger">* 页面之提供简单的商品修改,想修改更多内容，请到商家端后台进行操作!</view>
								<view class="d-flex flex-row a-center j-sb span-20">
									<view class="p-2 d-flex flex-column span-10">
										<view class="title">价格</view>
										<input style="background: #f2f2f2;" class="uni-input" />
									</view>
									<view class="p-2 d-flex flex-column span-10">
										<view class="title">数量</view>
										<input style="background: #f2f2f2;" class="uni-input" />
									</view>
								</view>
								
								<view class="d-flex flex-row a-center j-sb span-20">
									<view class="p-2 d-flex flex-column span-20">
										<view class="title">属性</view>
										<input style="background: #f2f2f2;" class="uni-input" />
									</view>				
								</view>
							</view>
						</uni-popup-dialog>
					</uni-popup>
				
		</view>
	</view>
</template>

<script>
	import title from "@/components/common/title.vue"
	import cuCustom from '@/components/common/custom.vue'
	import interceptor from "@/utils/request.js"
	export default {
		components: {
			title,
			cuCustom
		},
		data() {
			return {
				value: 0,
				scorllHeight: 500,
				loadtext: "上拉加载更多",
				value: 1,
				range: [{
						value: 0,
						text: "红包一"
					},
					{
						value: 1,
						text: "红包二"
					},
					{
						value: 2,
						text: "红包三"
					},
				],
				catId: null,
				orderInfo: null,
				goodsInfo:null,
				goodArr:[],
				listInfo:null
				
			}			
		},
		onLoad(e) {
			if (e && e.id) {
				this.catId = e.id
				this.getShopItemInfo()
			}
			uni.getSystemInfo({
				success: (res => {
					this.scorllHeight = res.windowHeight - uni.upx2px(40)
				})
			})
		},
		methods: {
			inputDialogToggle() {
				this.$refs.inputDialog.open()
			},
			leaveMessage() {
				this.$refs.leave.open()
			},
			// 商品信息修改
			shopInfoEdit(){
				this.$refs.shopInfo.open()
			},
			coatEdit() {
				this.$refs.coat.open()
			},
			dialogClose() {
				console.log('点击关闭')
			},
			dialogInputConfirm(val) {
				// uni.showLoading({
				// 	title: '3秒后会关闭'
				// })

				setTimeout(() => {
					uni.hideLoading()
					console.log(val)
					this.value = val
					// 关闭窗口后，恢复默认内容
					this.$refs.inputDialog.close()
					this.$refs.leaveMessage.close()
				}, 300)
			},
			coatConfirm(val) {
				// uni.showLoading({
				// 	title: '3秒后会关闭'
				// })
				
				setTimeout(() => {
					uni.hideLoading()
					console.log(val)
					this.value = val
					// 关闭窗口后，恢复默认内容
					this.$refs.coat.close()
				}, 300)
			},
			shopInfoConfirm(val) {
				// uni.showLoading({
				// 	title: '3秒后会关闭'
				// })
				
				setTimeout(() => {
					uni.hideLoading()
					console.log(val)
					this.value = val
					// 关闭窗口后，恢复默认内容
					this.$refs.coat.close()
				}, 300)
			},
			//  获取货物详情
			getShopItemInfo(){
				let params = {
					supplier_id: uni.getStorageSync("supplier_id"),
					order_id: this.catId
				}
				interceptor.get("/supplier_applet_api.php?act=orderInfo",params).then((res) => {
					this.orderInfo = res.info.order_order_info
					this.goodsInfo = res.info.goods_list[0]
					this.goodArr = res.info.goods_attr
					this.listInfo = res.info.list_info[0]
					this.$forceUpdate()
				})
			},
			// 返回订单状态
			returnOrderStatus(status){
				switch (status){
					case "1":
						return "已提交 待支付"
						break;
					case "2":
						return "已付款 商家待接单"
						break;
					case "3":
						return "用户取消订单"
						break;
					case "4":
						return "用户点击申请退款"
						break;
					case "5":
						return "商家同意退款商家同意退款"
						break;
					case "6":
						return "商家长时间未接单 自动退款"
						break;
					case "7":
						return "商家拒绝退款"
						break;
					case "8":
						return "后台强制退款"
						break;
					case "9":
						return "商家接单"
						break;
					case "10":
						return "骑手接单 待取货"
						break;
					case "11":
						return "待送达"
						break;
					case "12":
						return "订单已完成"
						break;
					default:
						break;
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.list-box {
		height: auto;

		.list {
			background: #FFFFFF;
			border-radius: 20rpx;
			height: auto;
		}

		.list-btn {}
	}

	.title-box {
		position: relative;

		.addIcon {
			position: absolute;
			right: 10rpx;
			top: 13px;
		}
	}
</style>